<template>
    <div style="width:300px;height: 100%; border-left: 1px solid var(--color-border-default);" v-if="showDetail">
       <!-- info -->
       <div class="group-info">
        <UserAvatar
          @click="openAvatarPopup(groupProfile?.avatar)"
          :url="groupProfile?.avatar"
          :nickName="groupProfile?.name"
        />
        <div class="group-info-text">
          <div>
            <span class="group-name truncate">
              {{ groupProfile?.name }}
            </span>
            <FontIcon
              v-if="isOwner"
              class="style-editPen icon-hover"
              iconName="EditPen"
              @click="openNamePopup"
            />
          </div>
          <span class="group-type">
            {{ GroupTypeMap[groupProfile?.type] }}
          </span>
        </div>
      </div>
      <el-divider />
    </div>
</template>

<script setup>
import {
  addGroupMember,
  deleteGroupMember,
  updateGroupProfile,
  GroupTypeMap,
  setMessageRemindType,
} from "@/chat/service/im-sdk-api/index";
import { restApi } from "@/chat/service/api/index";
import { useState } from "@/chat/utils/hooks/index";
import { showConfirmationBox } from "@/chat/utils/message";
// import { isFullStaffGroup } from "@/ai/utils";
const isFullStaffGroup = (conversation) => {
  return conversation.type === "group" && currentMemberList.value.length >= 50;
};
import { isByteLengthExceedingLimit, GroupModifyType } from "@/chat/utils/chat/index";
import { useGroupStore, useAppStore, useUserStore, useChatStore } from "@/chat/stores/index";
import emitter from "@/utils/mittBus";
import { storeToRefs } from "pinia";
import UserAvatar from "@/views/kfchat/components/UserAvatar/index.vue";
const { groupProfile } = defineProps({
  groupProfile: {
    type: Object,
    default: () => {},
  },
});

const notify = ref(false);
const AddMemberRef = ref();

const groupStore = useGroupStore();
const userStore = useUserStore();
const chatStore = useChatStore();
const appStore = useAppStore();
const [showDetail, setShowDetail] = useState();
const [loading, setLoading] = useState();

const { currentMemberList, isOwner } = storeToRefs(groupStore);
const { toAccount, currentSessionId, currentConversation } = storeToRefs(chatStore);

const beforeChange = () => {
  setLoading(true);
  return new Promise((resolve) => {
    setTimeout(() => {
      setLoading(false);
      return resolve(true);
    }, 1000);
  });
};

const setNotify = () => {
  setMessageRemindType(currentConversation.value);
};

const openNamePopup = async () => {
  const { name } = groupProfile;
  const data = { message: "输入群名", inputValue: name };
  const result = await showConfirmationBox(data, "prompt");
  if (result === "cancel") return;
  const isByteLeng = isByteLengthExceedingLimit(result.value, "name");
  if (isByteLeng) {
    // const long = GroupModifyType['name']
    appStore.showMessage({ message: "名称太长", type: "warning" });
    return;
  }
  modifyGroupInfo(result.value);
};

const openNoticePopup = async () => {
  const { notification } = groupProfile;
  const data = { message: "输入群公告", inputValue: notification };
  const result = await showConfirmationBox(data, "prompt");
  if (result === "cancel") return;
  const isByteLeng = isByteLengthExceedingLimit(result.value, "notification");
  if (isByteLeng) {
    // const long = GroupModifyType['notification']
    appStore.showMessage({ message: "公告太长", type: "warning" });
    return;
  }
  modifyGroupInfo(result.value, "notification");
};

const openDetails = () => {};

const openAvatarPopup = (url) => {
  emitter.emit("handleImageViewer", url);
};

const handleClose = (done) => {
  done();
};

const groupMemberAdd = () => {
  AddMemberRef.value.openDialog();
};

const navigate = (item) => {
  chatStore.addConversation({ sessionId: `C2C${item.userID}` });
  setShowDetail(false);
  setTimeout(() => {
    const dom = document.getElementById(`message_C2C${item.userID}`);
    dom?.scrollIntoView({ behavior: "smooth", block: "center" });
  }, 200);
};

const removeGroupMemberBtn = async (item) => {
  const data = { message: `确定将 ${item.nick || item.userID} 移出群聊?`, iconType: "warning" };
  const result = await showConfirmationBox(data);
  if (result === "cancel") return;
  const params = { groupID: toAccount.value, user: item.userID };
  const { code } = await deleteGroupMember(params);
  if (code !== 0) return;
  updataGroup();
};

const addGroupMemberBtn = async (value) => {
  const { groupID, type } = groupProfile;
  const { toAccount } = value;
  if (type === "Public") {
    const { ErrorCode } = await restApi({
      params: { groupId: groupID, member: toAccount },
      funName: "addGroupMember",
    });
    if (ErrorCode !== 0) return;
    updataGroup();
  } else {
    const { code, data } = await addGroupMember({ groupID, user: toAccount });
    if (code === 0) {
      updataGroup();
    } else {
      console.log(data);
    }
  }
};

const updataGroup = () => {
  setTimeout(() => {
    groupStore.handleGroupMemberList({ groupID: groupProfile.groupID });
  }, 200);
};
// 修改群资料
const modifyGroupInfo = async (value, modify) => {
  const { groupID } = groupProfile;
  const { code, group } = await updateGroupProfile({ groupID, value, modify });
  if (code !== 0) {
    appStore.showMessage({ message: "修改失败", type: "warning" });
  } else {
    console.log("modifyGroupInfo:", group);
  }
};

const handleDismissGroup = async () => {
  const data = { message: "确定解散群聊?", iconType: "warning" };
  const result = await showConfirmationBox(data);
  if (result === "cancel") return;
  groupStore.handleDismissGroup({ sessionId: currentSessionId.value, groupId: toAccount.value });
  setShowDetail(false);
};

const handleTransferGroup = async () => {
  const data = { message: "确定转让群聊?", iconType: "warning" };
  const result = await showConfirmationBox(data);
  if (result === "cancel") return;
};

const handleQuitGroup = async () => {
  const data = { message: "确定退出群聊?", iconType: "warning" };
  const result = await showConfirmationBox(data);
  if (result === "cancel") return;
  groupStore.handleQuitGroup({ sessionId: currentSessionId.value, groupId: toAccount.value });
  setShowDetail(false);
};

onMounted(() => {
  emitter.on("handleShowDetail", (val) => {
    setShowDetail(!showDetail.value);
  });
});

onBeforeUnmount(() => {
  emitter.off("handleShowDetail");
});

watch(currentConversation, (data) => {
  // AcceptAndNotify AcceptNotNotify
  notify.value = data.messageRemindType === "AcceptNotNotify";
});
</script>

<style lang="scss" scoped>
:global(.group-drawer-modal) {
  background-color: rgba(255, 255, 255, 0) !important;
}
:deep(.el-divider) {
  margin: 0;
}

.wrap-group {
  width: 40px;
  height: 14px;
  text-align: center;
  line-height: 14px;
  font-size: 8.64px;
  position: absolute;
  top: 30px;
  border-radius: 2px;
  background: #fffbe6;
}

.ai-center {
  color: #fa1414;
  border: 0.64px solid rgba(255, 229, 143, 1);
}

.style-Admin {
  color: #4ab017b3;
  border: 0.64px solid rgb(191, 232, 158);
}

.style-Owner {
  color: #faad14;
  border: 0.64px solid rgba(255, 229, 143, 1);
}

.style-editPen {
  cursor: pointer;
  vertical-align: bottom;
  margin-left: 5px;
}

.avatar:hover .style-close {
  visibility: visible;
}

.style-close {
  visibility: hidden;
  position: absolute;
  right: -5px;
  top: -5px;
  color: #f44336 !important;
  cursor: pointer;
}

.group-notice {
  padding: 12px 0;

  .group-notice-info {
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    line-height: 16px;
    min-height: 12px;
  }
}

.group-info {
  padding: 20px;
  display: flex;
  align-items: center;

  .group-info-text {
    display: flex;
    flex-direction: column;
    margin-left: 8px;
    gap: 4px;
    .group-name {
      display: inline-block;
      vertical-align: bottom;
      max-width: 150px;
      font-size: 14px;
      font-weight: 400;
      color: var(--color-message-chat-name);
      margin-right: 8px;
    }

    .group-type {
      font-size: 12px;
      font-weight: 400;
      color: #999999;
    }
  }
}

.group-member {
  padding: 12px 0;

  .group-member-title {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-time-divider);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;

    .total {
      font-size: 12px;
      font-weight: 400;
      color: #999999;

      span a {
        background-color: transparent;
        text-decoration: none;
        color: #006eff;
        cursor: pointer;
      }
    }
  }

  .group-member-avatar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-height: 180px;
    margin-top: 10px;

    .avatar {
      position: relative;

      .nick {
        font-size: 12px;
        width: 40px;
        display: inline-block;
        overflow: hidden;
        position: absolute;
        bottom: -18px;
        white-space: nowrap;
        text-align: center;
        text-overflow: ellipsis;
        color: var(--color-time-divider);
      }

      .isown {
        display: none;
      }
    }

    .margin {
      margin: 0 12px 20px 0;
    }
  }
}

.group-operator {
  padding-top: 20px;
}
</style>
